import React, { memo } from 'react';
import { Card, Divider, Radio } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from './Home.less';
import { Pie } from '@/components/Charts';

const ProportionSales = memo(
  ({ loading, dataOfQuestionType, dataOfFeedBack }) => {
    const [legendDataOfQuestionType, setLgendDataOfQuestionType] = React.useState([]);
    const [legendDataOfFeedBack, setLegendDataOfFeedBack] = React.useState([]);
    const toCreateLegend = (data, type) => {
      switch (type) {
        case 'questionType':
          setLgendDataOfQuestionType(data);
          break;
        case 'feedBack':
          setLegendDataOfFeedBack(data);
          break;
      }
    }

    return (
      <Card
        loading={loading}
        className={styles.salesCard}
        bordered={false}
        title={'问题分布'}
        bodyStyle={{ padding: 24, height: loading ? '' : 450 }}
      >
        <div className={'clearfix'}>
          <div style={{ float: 'left', width: '45%' }}>
            <Pie
              hasLegend={false}
              subTitle={'问题类型分布'}
              data={dataOfQuestionType}
              valueFormat={(value) => dataOfQuestionType.length === 5 ? <span dangerouslySetInnerHTML={{ __html: value }} /> : 0}
              height={200}
              lineWidth={4}
              style={{ padding: '8px 0' }}
              toCreateLegend={toCreateLegend}
              dataType={'questionType'}
            />
            <ul style={{ position: 'relative', paddingInlineStart: 0, width: 230, margin: '0 auto' }}>
              {legendDataOfQuestionType.map((item, i) => (
                <li key={item.x} style={{ margin: '5px 0' }}>
                  <span
                    className={styles.dot}
                    style={{
                      backgroundColor: !item.checked ? '#aaa' : item.color,
                    }}
                  />
                  <span style={{ display: 'inline-block', width: 85 }}>{item.x}</span>
                  <Divider type="vertical" />
                  <span>{`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}</span>
                  <span style={{ position: 'absolute', right: 0 }}>{item.y}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ float: 'right', width: '45%' }}>
            <Pie
              hasLegend={false}
              subTitle={'用户反馈分布'}
              data={dataOfFeedBack}
              valueFormat={value => dataOfFeedBack.length === 3 ? <span dangerouslySetInnerHTML={{ __html: value }} /> : 0}
              height={200}
              lineWidth={4}
              style={{ padding: '8px 0' }}
              toCreateLegend={toCreateLegend}
              dataType={'feedBack'}
            />
            <ul style={{ position: 'relative', paddingInlineStart: 0, width: 230, margin: '0 auto' }}>
              {legendDataOfFeedBack.map((item, i) => (
                <li key={item.x} style={{ margin: '5px 0' }}>
                  <span
                    className={styles.dot}
                    style={{
                      backgroundColor: !item.checked ? '#aaa' : item.color,
                    }}
                  />
                  <span style={{ display: 'inline-block', width: 85 }}>{item.x}</span>
                  <Divider type="vertical" />
                  <span>{`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}</span>
                  <span style={{ position: 'absolute', right: 0 }}>{item.y}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Card>
    )
  }
);

export default ProportionSales;
